<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
          <div style="height: 36px;">&nbsp;</div>
        </el-col>
        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
          <div class="search">
            <el-row :gutter="20">
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.name"
                  size="medium"
                  placeholder="老人姓名"
                  clearable
                ></el-input>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.mobile"
                  size="medium"
                  placeholder="联系方式"
                  clearable
                ></el-input>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-input
                  v-model="selectForm.id_card"
                  size="medium"
                  placeholder="身份证"
                  clearable
                ></el-input>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-select
                  v-model="selectForm.status"
                  clearable
                  placeholder="入住状态"
                  filterable
                  size="medium"
                  style="width: 100%;"
                >
                  <el-option :key="0" label="正常" :value="1"></el-option>
                  <el-option :key="1" label="已离院" :value="-1"></el-option>
                </el-select>
              </el-col>

              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  class="fr"
                  @click="handleSearch"
                >
                  搜索
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
        @changeForMal="changeForMal"
        @cancelOrder="cancelOrder"
      ></app-table>
    </div>
    <el-dialog
      :title="base.name"
      :visible.sync="dialogVisible"
      width="75%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <case-Form :key="key" :gutter="30" :data="formData"></case-Form>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import caseForm from "@/components/CommonForm/caseForm";
  import { getList } from "@/api/oldermanager";
  export default {
    name: "Index",
    components: { appTable, caseForm },
    data() {
      return {
        key: Math.random(),
        dialogVisible: false,
        formData: {},
        rules: {},
        base: {},
        allData: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "age", label: "年龄" },
          { prop: "sex", label: "性别", formatter: this.genderFormatter },
          { prop: "mobile", label: "联系方式" },
          { prop: "id_card", label: "身份证" },
          { prop: "floor_str", label: "床位号" },
          {
            prop: "status",
            label: "入住状态",
            formatter: this.statusFormatter,
          },
          { prop: "create_time", label: "入住时间" },
        ],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      handleSearch() {
        this.getTableData(this.selectForm)
      },
      statusFormatter(row, column) {
        if (row.status == -1) {
          return "已离院";
        } else {
          return "正常";
        }
      },
      genderFormatter(row, column) {
        if (row.sex == 1) {
          return "女";
        } else if (row.sex == 2) {
          return "男";
        }
      },
      getTableData(data) {
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", 4);
          }
        });
      },
      handleAdd() {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = {};
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      cancelOrder(rows) {
        console.log(rows)
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            getList("delete", {id: rows.rows[0].id}).then(res => {
              if(res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
      changeForMal(rows) {
        let params = {
          id: rows.rows[0].id,
        };
        let paramOrder = {
          e_id: rows.rows[0].id,
        };
        getList("get", params).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
            this.allData = resp.data;
            this.base = resp.data.base;
            this.formData = this.allData;
            this.dialogVisible = true;
            this.key = Math.random();
          }
        });
      },
      closeDialog() {
        this.dialogVisible = false;
      },
      closeDialogForm() {
        this.dialogVisibleForm = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        width: 100%;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
    }
  }
</style>
